<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title></title>
	<style>
		.slide-right-enter-active {
			animation: slide-right .5s;
		}
		.slide-right-leave-active {
			animation: slide-right .5s reverse;
		}
		@keyframes slide-right {
			0% {
				transform: translateX(100px);
				opacity: 0;
			}
			100% {
				transform: translateX(0);
				opacity: 1;
			}
		}
		.slide-left-enter-active {
			animation: slide-left .5s;
		}
		.slide-left-leave-active {
			animation: slide-left .5s reverse;
		}
		@keyframes slide-left {
			0% {
				transform: translateX(-100%);
				opacity: 0;
			}
			100% {
				transform: translateX(0);
				opacity: 1;
			}
		}
	</style>
</head>

<body>
	<script src="./vue.js"></script>
	<script src="./vue-router.js"></script>

	<div id="app">
		<router-link to="/user">用户</router-link>
		<router-link to="/user/detail">用户详情</router-link>
		<router-link to="/user/list">用户列表</router-link>
		<router-view />
	</div>

	<script>
		var User = {
			template: `
                <div>
					<h1>我是用户</h1>
					<p>{{transitionName}}</p>
					<transition :name="transitionName" mode='out-in'>
						<router-view />
					</transition>
                </div>
            `,
			data() {
				return {
					transitionName: null
				}
			},
			watch: {
				$route(to, from) {
					// const toDepth = to.path.split('/').length
					// const fromDepth = from.path.split('/').length
					// this.transitionName = toDepth > fromDepth ? "slide-right" : "slide-left"

					var arr = to.path.split('/')
					this.transitionName = arr[arr.length - 1] === 'list' ? 'slide-left' : 'slide-right'
				}
			}
		}
		var UserDetail = {
			template: `
				<p style="background: red; color: #fff;">用户详情</p>
			`
		}
		var UserList = {
			template: `
				<p style="background: blue; color: #fff;">用户列表</p>
			`
		}

		var routes = [
			{
				path: "/user", component: User, meta: { name: 'dw', age: 22 },
				children: [
					{ path: "detail", name: "user-detail", component: UserDetail },
					{ path: "list", name: "user-list", component: UserList },
				]
			},
		]
		var router = new VueRouter({
			routes
		})
		router.beforeEach((to, from, next) => {
			next()
		})
		new Vue({
			router
		}).$mount("#app")
	</script>
</body>

</html>